import { Table, Button, Modal, Form, Select, Input, Space } from 'antd';
import React from 'react'
import Alarmdetails from './Alarmdetails'
import { connect } from "react-redux";
import * as actions from "../store/action";
import moment from 'moment'
const { Option } = Select

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            visible2: false,
            information: "", //告警详情内容
            id: '',
            pageIndex: 1, //默认页面为第一页
            pageSize: 10,
            delflag: "",
        }
    }
    getDetails = (record) => {
        this.setState(
            {
                visible2: true,
                information: record,
            }
        );
    };

    feedbackInformation = (value) => {
        this.setState({
            visible: false,
        });
        let details = {
            key: this.state.id,
            status: value.status,
            feedbackContent: value.feedbackContent,
        };
        this.props.feedBack(details, this.props.pageIndex);
    };
    render() {
        const columns = [
            {
                title: "分派时间",
                dataIndex: "distributeTime",
                align: "center",
                render: (distributeTime) => {
                    if (distributeTime === '') {
                        return '';
                    } else {
                        return moment(distributeTime).format("YYYY-MM-DD HH:mm");
                    }
                },
            },
            {
                title: "告警时间",
                dataIndex: "warningTime",
                align: "center",
                render: (warningTime) => {
                    if (warningTime === '') {
                        return '';
                    } else {
                        return moment(warningTime).format("YYYY-MM-DD HH:mm");
                    }
                },
            },
            {
                title: "告警地点",
                dataIndex: "warningAddress",
                align: "center",
            },
            {
                title: "状态",
                dataIndex: "status",
                align: "center",
            },
            {
                title: "反馈时间",
                dataIndex: "feedbackTime",
                align: "center",
                render: (feedbackTime) => {
                    if (feedbackTime === '') {
                        return '';
                    } else {
                        return moment(feedbackTime).format("YYYY-MM-DD HH:mm");
                    }
                },
            },
            {
                title: "反馈人",
                dataIndex: "userName",
                align: "center",
            },
            {
                title: "操作",
                dataIndex: "operation",
                align: "center",
                render: (text, record) => {
                    return record.status === "疑似" ? (
                        <Button
                            type="text"
                            style={{ color: "blue" }}
                            onClick={() => this.setState({ visible: true, id: record.id })}
                        >
                            处理告警
                        </Button>
                    ) : (
                            <Button
                                type="text"
                                style={{ color: "blue" }}
                                onClick={() => {
                                    this.getDetails(record);
                                }}
                            >
                                告警详情
                            </Button>
                        );
                },
            },
        ];
        const { LinerWarning, pageIndex, pageSize, totalCount, treatedDataSize, untreatedDataSize } = this.props;
        const pagination = {
            current: pageIndex, //当前页
            total: totalCount,
            pageSize: pageSize,
            showTotal: total => `共 ${total} 条数据`,
            onChange: this.onChange
        }

        return (
            <>
                <Table
                    columns={columns}
                    dataSource={LinerWarning}
                    pagination={pagination}
                />
                <Modal
                    title="填报告警处理"
                    visible={this.state.visible}
                    onCancel={() => this.setState({ visible: false })}
                    // onClick={}
                    destroyOnClose="true" //关闭时销毁 Modal 里的子元素
                    footer={null}
                >
                    <Form style={{ height: "180px" }} onFinish={this.feedbackInformation}>
                        <Form.Item
                            name="status"
                            label="反馈状态"
                            rules={[{ required: true, message: "请选择反馈状态" }]}
                        >
                            <Select placeholder="请选择反馈状态">
                                <Option value="确认">确认</Option>
                                <Option value="误报">误报</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name="feedbackContent"
                            label="反馈结果"
                            rules={[{ required: true, message: "请输入反馈结果" }]}
                        >
                            <Input.TextArea></Input.TextArea>
                        </Form.Item>
                        <Form.Item style={{ float: "right" }}>
                            <Space>
                                <Button type="primary" ghost htmlType="submit">
                                    提交
                                </Button>
                                <Button
                                    type="primary"
                                    ghost
                                    htmlType="button"
                                    onClick={() => this.setState({ visible: false })}
                                    danger
                                >
                                    取消
                                </Button>
                            </Space>
                        </Form.Item>
                    </Form>
                </Modal>
                <Modal
                    title="查看告警详情"
                    visible={this.state.visible2}
                    onCancel={() => this.setState({ visible2: false })}
                    footer={null}
                >
                    <Alarmdetails data={this.state.information} />
                </Modal>
            </>
        )
    }
    // 页面跳转
    onChange = (current, pageSize) => {
        this.props.handlePageChange(current, pageSize);
    };
}
const mapStateToProps = (state) => ({
    //获取巡线工个人告警信息
    LinerWarning: state.getLinerWarning.LinerWarning,
});

const mapDispatchToProps = (dispatch) => ({
    //反馈
    feedBack(details, pageIndex) {
        dispatch(actions.feedBack(details, pageIndex));
    },
});

export default connect(mapStateToProps, mapDispatchToProps)(Index);